<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>用户登录</title>

    <script src="/js/jquery-3.5.1.js"></script>
    <script>
        $(document).ready(function() {

            $(".form").slideDown(500);

            $("#landing").addClass("border-btn");

            $("#registered").click(function() {
                $("#landing").removeClass("border-btn");
                $("#landing-content").hide(500);
                $(this).addClass("border-btn");
                $("#registered-content").show(500);

            })

            $("#landing").click(function() {
                $("#registered").removeClass("border-btn");
                $(this).addClass("border-btn");

                $("#landing-content").show(500);
                $("#registered-content").hide(500);
            })
        });
    </script>

    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
        }

        body {
            background: #F7F7F7;
        }

        .form {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -185px;
            margin-top: -210px;
            height: 470px;
            width: 340px;
            font-size: 18px;
            -webkit-box-shadow: 0px 0px 10px #A6A6A6;
            background: #fff;
        }

        .border-btn {
            border-bottom: 1px solid #ccc;
        }

        #landing,
        #registered {
            float: left;
            text-align: center;
            width: 170px;
            padding: 15px 0;
            color: #545454;
        }

        #landing-content {
            clear: both;
        }

        .inp {
            height: 30px;
            margin: 0 auto;
            margin-bottom: 30px;
            width: 200px;
        }

        .inp>input {
            text-align: center;
            height: 30px;
            width: 200px;
            margin: 0 auto;
            transition: all 0.3s ease-in-out;
        }

        .login {
            border: 1px solid #A6A6A6;
            color: #a6a6a6;
            height: 30px;
            width: 202px;
            text-align: center;
            font-size: 13.333333px;
            margin-left: 70px;
            line-height: 30px;
            margin-top: 30px;
            transition: all 0.3s ease-in-out;
        }

        .regis{
            border: 1px solid #A6A6A6;
            color: #a6a6a6;
            height: 30px;
            width: 202px;
            text-align: center;
            font-size: 13.333333px;
            margin-left: 70px;
            line-height: 30px;
            transition: all 0.3s ease-in-out;
        }

        .regis:hover{
            background: #A6A6A6;
            color: #fff;
        }

        .login:hover {
            background: #A6A6A6;
            color: #fff;
        }

        #bottom {
            margin-top: 30px;
            font-size: 13.333333px;
            color: #a6a6a6;
        }

        #registeredtxt {
            float: left;
            margin-left: 80px;
        }

        #forgotpassword {
            float: right;
            margin-right: 80px;
        }

        #photo {
            border-radius: 80px;
            border: 1px solid #ccc;
            height: 80px;
            width: 80px;
            margin: 0 auto;
            overflow: hidden;
            clear: both;
            margin-top: 30px;
            margin-bottom: 30px;
        }

        #photo>img {
            height: 80px;
            width: 80px;
            -webkit-background-size: 220px 220px;
            border-radius: 60px;
            -webkit-transition: -webkit-transform 1s linear;
            -moz-transition: -moz-transform 1s linear;
            -o-transition: -o-transform 1s linear;
            -ms-transition: -ms-transform 1s linear;
        }

        #registered-content {
            margin-top: 20px;
            display: none;
        }

        .fix {
            clear: both;
        }
        .form{
            display: none;
        }

    </style>

</head>

<body>
<div class="form">
    <div id="landing">登陆</div>
    <div id="registered">注册</div>
    <div class="fix"></div>
    <div id="landing-content">
        <div id="photo"><img src="img/book.jpeg" /></div>
        <div class="inp"><input id="username1" name="userName" type="text" placeholder="用户名" /><span id="name1" ></span></div>
        <div class="inp"><input id="pwd1" name="borPassword" type="password" placeholder="密码" /><span id="pwd" ></span></div>
        <div class="login" onclick="login()" id="loginDiv">登录</div>
        <div id="bottom"><a href="userChangePwd.html" id="forgotpassword" >忘记密码</a></div>
    </div>
    <form action="#">
        <div id="registered-content">
            <div class="inp"><input id="username2" name="userName" type="text" placeholder="请输入用户名" /><span id="name2" ></span></div>
            <div class="inp"><input id="pwd2" name="borPassword" type="password" placeholder="请输入密码" /><span id="pwd3"></span></div>
            <div class="inp"><input id="pwd4"  type="password" placeholder="请再次输入密码" /><span id="pwd5" ></span></div>
            <div class="inp"><input id="email" name="email" type="text" placeholder="电子邮箱" /><span id="email1" ></span></div>
            <div class="inp"><input id="idcard" name="idCard" type="text" placeholder="身份证号码" /><span id="idcard1" ></span></div>
            <div class="inp"><input id="phone" name="phone" type="text" placeholder="手机号" /><span id="phone1" ></span></div>
            <input class="regis" id="regisButton" type="button" value="立即注册" style="width: 202px;height: 30px" onclick="regis()">
        </div>
    </form>

</div>


</body>
</html>

<script>
    //登录
    var username1 = document.getElementById("username1");
    var pwd1 = document.getElementById("pwd1");
    var pwd = document.getElementById("pwd");
    var name1 = document.getElementById("name1");
    //注册
    var username2 = document.getElementById("username2");
    var name2 = document.getElementById("name2");
    var pwd2 = document.getElementById("pwd2");
    var pwd3 = document.getElementById("pwd3");
    var pwd4 = document.getElementById("pwd4");
    var pwd5 = document.getElementById("pwd5");
    var email = document.getElementById("email");
    var email1 = document.getElementById("email1");
    var idcard = document.getElementById("idcard");
    var idcard1 = document.getElementById("idcard1");
    var phone = document.getElementById("phone");
    var phone1 = document.getElementById("phone1");

    //登录
    username1.onblur = function (){
        if (!username1.value){
            name1.innerText="用户名不能为空";
            name1.style.color="red";
            return false;
        }else {
            name1.innerText="√";
            name1.style.color="green";
            return true;
        }
    }

    pwd1.onblur = function (){
        if (!pwd1.value){
            pwd.innerText="密码不能为空";
            pwd.style.color="red";
            return false;
        }else {
            pwd.innerText="√";
            pwd.style.color="green";
            return true;
        }
    }

    //注册
    username2.onblur = function (){
        if (!username2.value){
            name2.innerText="用户名不能为空";
            name2.style.color="red";
            return false;
        }else {
            let request = new XMLHttpRequest();
            let url = "/regisName.bor?userName="+username2.value;
            request.open("Get",url);
            request.onreadystatechange = function (){
                if (request.readyState==4){
                    if (request.responseText=="用户名已存在"){
                        name2.innerText=request.responseText;
                        name2.style.color="red";
                        return false;
                    }else {
                        name2.innerText="√";
                        name2.style.color="green";
                        return true;
                    }
                }
            }
            request.send(null);
        }
    }

    pwd2.onblur = function (){
        if (!pwd2.value){
            pwd3.innerText="密码不能为空";
            pwd3.style.color="red";
            return false;
        }else {
            pwd3.innerText="√";
            pwd3.style.color="green";
            return true;
        }
    }

    pwd4.onblur = function (){
        if (!pwd4.value){
            pwd5.innerText="请确认密码";
            pwd5.style.color="red";
            return false;
        }else if (!(pwd4.value==pwd2.value)){
            pwd5.innerText="两次密码不一致,请重新输入";
            pwd5.style.color="red";
            return false;
        }else {
            pwd5.innerText="√";
            pwd5.style.color="green";
            return true;
        }
    }

    email.onblur = function (){
        if (!email.value){
            email1.innerText="邮箱不能为空";
            email1.style.color="red";
            return false;
        }else if (!(email.value.match(/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/))){
            email1.innerText="邮箱格式错误";
            email1.style.color="red";
            return false;
        }else {
            email1.innerText="√";
            email1.style.color="green";
            return true;
        }
    }

    idcard.onblur = function (){
        if (!idcard.value){
            idcard1.innerText="身份证号码不能为空";
            idcard1.style.color="red";
            return false;
        }else if (!(idcard.value.match(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/))){
            idcard1.innerText="请输入正确的身份证号码";
            idcard1.style.color="red";
            return false;
        }else {
            idcard1.innerText="√";
            idcard1.style.color="green";
            return true;
        }
    }

    phone.onblur = function (){
        if (!phone.value){
            phone1.innerText="手机号不能为空";
            phone1.style.color="red";
            return false;
        }else if (!(phone.value.match(/^\d{5,11}$/))){
            phone1.innerText="请输入正确的手机号";
            phone1.style.color="red";
            return false;
        }else {
            phone1.innerText="√";
            phone1.style.color="green";
            return true;
        }
    }


    function regis(){
        var regisButton = document.getElementById();
        if (username2.onblur&&pwd2.onblur&&pwd4.onblur&&email.onblur&&idcard.onblur&&phone.onblur){
            let request = new XMLHttpRequest();
            let url = "/regis.bor?userName="+username2.value+"&borPassword="+pwd2.value+"&email="+email.value+"&idCard="+idcard.value+"&phone="+phone.value;
            request.open("Get",url);
            request.onreadystatechange = function (){
                if (request.readyState==4){
                    confirm(request.responseText);
                }
            }
            request.send(null);
        }else {
            regisButton.disabled=true;
        }

    }

    function login(){
        let request = new XMLHttpRequest();
        let url = "/login.bor?userName="+username1.value+"&borPassword="+pwd1.value;
        request.open("Get",url);
        request.onreadystatechange = function (){
            if (request.readyState==4){
                if (request.responseText=="登录成功"){
                    window.location.href="library-reader/borrower-index.html";
                }else {
                    confirm(request.responseText);
                }
            }
        }
        request.send(null);

    }

</script>


